<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>MonkeyCMS</title>
<link type="text/css" rel="stylesheet" href="statics/css/monkey.css"/>
<link type="text/css" rel="stylesheet" href="statics/css/frame.css"/>
<script type="text/javascript" src="statics/js/jquery.min.js"></script>
<script type="text/javascript" src="statics/js/prettify.js"></script>
<script type="text/javascript" src="statics/js/monkey.js"></script>

</head>

<body>
<!--page_header-->
<div class="page_header">
	<h3>通用区块</h3>
	<p>带边框和标题的标准区块。</p>
</div>
<!--/page_header-->

<!--page_main-->
<div class="page_main">

	<!--默认用法-->
		<h4>默认用法</h4>

		<!--示例-->
		<div class="u_box">
			<div class="u_box_head">
				<div class="u_box_head_border">
				    <h3 class="u_box_head_title">区块标题</h3>
				    <span class="u_box_head_text">其他文字</span>
				    <a href="#" class="u_box_head_more">更多</a>
				</div>
			</div>
			<div class="u_box_container">
				<div class="u_box_content">u_box_content 有默认内边距</div>
			</div>
		</div>
		<!--/示例-->
		<h5>代码：</h5>
		<!--代码-->
		<pre class="prettyprint linenums">
&lt;div class="u_box"&gt;
    &lt;div class="u_box_head"&gt;
        &lt;div class="u_box_head_border"&gt;
            &lt;h3 class="u_box_head_title"&gt;区块标题&lt;/h3&gt;
            &lt;span class="u_box_head_text"&gt;其他文字&lt;/span&gt;
            &lt;a href="#" class="u_box_head_more"&gt;更多&lt;/a&gt;
        &lt;/div>
    &lt;/div>
    &lt;div class="u_box_container"&gt;
        &lt;div class="u_box_content"&gt;u_box_content 有默认内边距&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</pre>
		<!--/代码-->
		<!--/默认用法-->

		<!--浅色系区块-->
		<h4>浅色系区块</h4>

		<!--示例-->
		<div class="u_box u_box_light">
		    <div class="u_box_head">
		        <div class="u_box_head_border">
		            <h3 class="u_box_head_title">浅色系</h3>
		            <span class="u_box_head_text">其他文字</span>
		            <a href="#" class="u_box_head_more">更多</a>
		        </div>
		    </div>
		    <div class="u_box_container">
		        <div class="u_box_content">ui-box-content 有默认内边距</div>
		    </div>
		</div>
		<!--/示例-->
		<h5>代码：</h5>
		<!--代码-->
		<pre class="prettyprint linenums">
&lt;div class="u_box u_box_light"&gt;
    &lt;div class="u_box_head"&gt;
        &lt;div class="u_box_head_border"&gt;
            &lt;h3 class="u_box_head_title"&gt;浅色系&lt;/h3&gt;
            &lt;span class="u_box_head_text"&gt;其他文字&lt;/span&gt;
            &lt;a href="#" class="u_box_head_more"&gt;更多&lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="u_box_container"&gt;
        &lt;div class="u_box_content"&gt;ui-box-content 有默认内边距&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</pre>
		<!--/代码-->

		<!--/浅色系区块-->

		<!--内容区域隐藏-->
		<h4>内容区域隐藏</h4>

		<!--示例-->
		<div class="u_box">
		    <div class="u_box_head">
		        <div class="u_box_head_border">
		            <h3 class="u_box_head_title">没有内容</h3>
		            <span class="u_box_head_text">其他文字</span>
		            <a href="#" class="u_box_head_more">更多</a>
		        </div>
		    </div>
		    <div class="u_box_container" style="display: none;">
		        <div class="u_box_content">u_box_content 有默认内边距</div>
		    </div>
		</div>
		<!--/示例-->
		<h5>代码：</h5>
		<!--代码-->
		<pre class="prettyprint linenums">
&lt;div class="u_box"&gt;
    &lt;div class="u_box_head"&gt;
        &lt;div class="u_box_head_border"&gt;
            &lt;h3 class="u_box_head_title">没有内容&lt;/h3&gt;
            &lt;span class="u_box_head_text">其他文字&lt;/span&gt;
            &lt;a href="#" class="u_box_head_more">更多&lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="u_box_container" style="display: none;"&gt;
        &lt;div class="u_box_content"&gt;u_box_content 有默认内边距&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</pre>
		<!--/代码-->

		<!--/内容区域隐藏-->

		<!--两个区块相连-->
		<h4>两个区块相连</h4>

		<!--示例-->
		<div class="u_box">
		    <div class="u_box_head">
		        <div class="u_box_head_border">
		            <h3 class="u_box_head_title">区块标题</h3>
		            <span class="u_box_head_text">其他文字</span>
		            <a href="#" class="u_box_head_more">更多</a>
		        </div>
		    </div>
		    <div class="u_box_container">
		        <div class="u_box_content">u_box_content 有默认内边距</div>
		    </div>
		</div>
		<div class="u_box u_box_follow">
		    <div class="u_box_head">
		        <div class="u_box_head_border">
		            <h3 class="u_box_head_title">连着上面的box</h3>
		            <span class="u_box_head_text">其他文字</span>
		            <a href="#" class="u_box_head_more">更多</a>
		        </div>
		    </div>
		    <div class="u_box_container">
		        <div class="u_box_content">u_box_content 有默认内边距</div>
		    </div>
		</div>
		<!--/示例-->
		<h5>代码：</h5>
		<!--代码-->
		<pre class="prettyprint linenums">
&lt;div class="u_box"&gt;
    &lt;div class="u_box_head"&gt;
        &lt;div class="u_box_head_border"&gt;
            &lt;h3 class="u_box_head_title"&gt;区块标题&lt;/h3&gt;
            &lt;span class="u_box_head_text"&gt;其他文字&lt;/span&gt;
            &lt;a href="#" class="u_box_head_more"&gt;更多&lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="u_box_container"&gt;
        &lt;div class="u_box_content"&gt;u_box_content 有默认内边距&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class="u_box u_box_follow"&gt;
    &lt;div class="u_box_head"&gt;
        &lt;div class="u_box_head_border"&gt;
            &lt;h3 class="u_box_head_title"&gt;连着上面的box&lt;/h3&gt;
            &lt;span class="u_box_head_text"&gt;其他文字&lt;/span&gt;
            &lt;a href="#" class="u_box_head_more"&gt;更多&lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="u_box_container"&gt;
        &lt;div class="u_box_content"&gt;u_box_content 有默认内边距&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</pre>
		<!--/代码-->

		<!--/两个区块相连-->

</div>
<!--/page_main-->
</body>
</html>